<template>
	<div class="timeManage">
    <el-form class="searchForm">
      <el-form-item>
        <el-input class="seech1" placeholder="停车场/车主姓名/手机号"></el-input>
      </el-form-item>
      <!-- <el-form-item class="seech0">
        <el-select class="seech2" placeholder="合作状态">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
          <el-option label="不限" value="null"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item class="changeTime">
        <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开通开始日期"
              end-placeholder="开通结束日期">
            </el-date-picker>
      </el-form-item>
      <el-form-item class="changeTime">
        <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="终止开始日期"
              end-placeholder="终止结束日期">
            </el-date-picker>
      </el-form-item> -->
      <el-form-item style="width: 80px;">
        <el-button type="primary" >搜索</el-button>
      </el-form-item>
    </el-form>

    <div class="topContent">
      <span class="topContent_title">总收益：</span><span class="topContent_money">￥0.00</span>元
    </div>
    <div class="topContent">
      <span class="topContent_title">充值花费：</span><span class="topContent_money">￥0.00</span>元
    </div>

    <!-- 数据列表展示 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="parkName" label="停车场名称" align="center">
      </el-table-column>
      <el-table-column prop="parkAddress" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="name" label="车场主名称" align="center">
      </el-table-column>
      <el-table-column prop="mobilePhone" label="联系电话" align="center">
      </el-table-column>
      <el-table-column prop="parkStatus" label="合作状态" align="center">
      </el-table-column>
      <el-table-column prop="balance" label="剩余时长(时)" align="center">
      </el-table-column>
      <el-table-column prop="beginTime" label="开通时间" align="center">
      </el-table-column>
      <el-table-column prop="endTime" label="终止时间" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
           <el-button type="primary" size="mini" @click="rechargeShow = true; row=scope.row">充值</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="充值合作时长" :visible.sync="rechargeShow" width="400px">
    	<Recharge v-if="rechargeShow" :row='row'/>
    </el-dialog>

	</div>
</template>

<script>
  import Recharge from './components/recharge.vue'

	export default {
		name: 'timeManage',
    components: { Recharge },
		data() {
			return {
        value1: '',
        tableData: [],
        searchForm: {
          current: 1,
          size: 10
        },
        rechargeShow: false
			}
		},
		mounted() {
      this.getTableData();
		},
		methods: {
      getTableData() {
        this.$axios({
          method: 'post',
          url: '/api/sPlatRechargeRecord/getParkDurationRecordByManage',
          data: this.searchForm
        }).then((res) => {
          this.tableData = res.data.pageInfo.records;
        })
      }
		}
	}
</script>

<style scoped>
  .timeManage {
    padding: 20px;
  }
  .searchForm .el-form-item {
  	width: 220px;
  	display: inline-block;
  }
  .searchForm .seech0 {
    width: 120px;
  }
  .seech1 {
  	width:200px;
  }
  .seech2 {
    width: 110px;
  }
  .searchForm .changeTime {
    width: 360px;
    /* border: 1px solid red; */
  }
  .topContent {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 8px 20px;
    border-radius: 3px;
    font-size: 14px;
    background-color: #eee;
    margin-right: 10px;
  }
  .topContent_title,
  .topContent_money {
    font-weight: bold;
    font-size: 16px;
  }
  .topContent_money {
    color: red;
  }




</style>
